<template>
  <div class="containter">
    <div class="title">近期天气</div>
    <div class="charts">
      <div class="top-chart">
        <div class="item" v-for="item in weatherRencent">
          <span>{{ item.week }}</span>
          <span>{{ item.date }}</span>
          <span>{{ item.dayweather }}</span>
          <span>风力{{ item.daypower }}级</span>
        </div>
      </div>
      <div class="bottom-chart">
        <v-chart class="chart" :option="option"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/Weather.js'
import { useRoute } from 'vue-router'


const weatherStore = useWeatherStore()
const { weatherRencent, localStorageCityName, cityName } = storeToRefs(weatherStore)
const { getIPReportWeather, getSearchReportWeather, getLocalStorageReportWeather, formatDate } = useWeatherStore()

const route = useRoute()
console.log(weatherRencent.value)
const daytemp = ref([])
const nighttemp = ref([])

onMounted(async () => {
  if (route.name === 'home') {
    await getIPReportWeather()
    console.log(weatherRencent.value)
    formatDate()
    daytemp.value = weatherRencent.value.map((item) => item.daytemp)
    nighttemp.value = weatherRencent.value.map((item) => item.nighttemp)
    renderChart(daytemp.value, nighttemp.value)
  } else if (route.name === 'search') {
    if (localStorageCityName.value) {
      await getLocalStorageReportWeather()
      formatDate()
      daytemp.value = weatherRencent.value.map((item) => item.daytemp)
      nighttemp.value = weatherRencent.value.map((item) => item.nighttemp)
      renderChart(daytemp.value, nighttemp.value)
    } else if (cityName.value) {
      await getSearchReportWeather(cityName.value)
      formatDate()
      daytemp.value = weatherRencent.value.map((item) => item.daytemp)
      nighttemp.value = weatherRencent.value.map((item) => item.nighttemp)
      renderChart(daytemp.value, nighttemp.value)
    }
  }
})

const option = ref({})

const renderChart = (v1, v2) => {
  option.value = {
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false,
      data: [1, 2, 3, 4],
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      top: 40,
      left: 120,
      right: 120,
      bottom: 40,
    },
    backgroundColor: '#004e71',

    series: [
      {
        name: '白',
        type: 'line',
        data: v1,
        smooth: true,
        symbol: 'circle',
        symbolSize: 10,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter(params) {
            return `白${params.value}°C`
          },
        },
      },
      {
        name: '晚',
        type: 'line',
        data: v2,
        smooth: true,
        symbol: 'circle',
        symbolSize: 10,
        label: {
          show: true,
          position: 'bottom',
          color: '#fff',
          formatter(params) {
            return `晚${params.value}°C`
          },
        },
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.containter {
  margin-top: 20px;

  .charts {
    display: flex;
    flex-direction: column;
    background: #004e71;
    padding: 20px 100px;
    .top-chart {
      display: flex;
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        background: #004e71;
        span {
          background: #004e71;
        }
      }
    }
    .bottom-chart {
      margin-top: 20px;
      width: 100%;
      height: 160px;
      .chart {
        background: #004e71;
      }
    }
  }
}
</style>
